<template>
	<div class="search">
		<div class="function">
			<div class="conditional">
				<span>姓名</span>
				<el-input v-model="input" placeholder="请输入内容"> </el-input>
			</div>
			<div class="conditional">
				<span>手机号</span>
				<el-input v-model="phone" placeholder="请输入内容"> </el-input>
			</div>
			<div class="conditional">
				<span>状态</span>
				<el-input v-model="input" placeholder="请输入内容"> </el-input>
			</div>
			<div class="conditional">
				<span>创建时间</span>
				<el-date-picker
					v-model="crtTime"
					style="width: 17.5vw"
					type="datetimerange"
					:picker-options="pickerOptions"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				/>
			</div>
		</div>
		<div class="btn">
			<el-button type="primary" plain>
				<template #icon>
					<i class="iconfont icon-search"></i>
				</template>
				搜索
			</el-button>
			<el-button plain>
				<template #icon>
					<i class="iconfont icon-reset"></i>
				</template>
				重置
			</el-button>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from 'vue';

const crtTime = ref('');
const phone = ref('');

const pickerOptions = reactive({
	shortcuts: [
		{
			text: '最近一周',
			onClick(picker) {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
				picker.$emit('pick', [start, end]);
			},
		},
		{
			text: '最近一个月',
			onClick(picker) {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				picker.$emit('pick', [start, end]);
			},
		},
		{
			text: '最近三个月',
			onClick(picker) {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
				picker.$emit('pick', [start, end]);
			},
		},
	],
});
</script>

<style lang="scss" scoped>
.search {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	.function {
		display: flex;
		.conditional {
			font-size: 14px;
			margin-right: 0.7vw;
			display: flex;
			align-items: center;
			span {
				margin-right: 0.5vw;
			}
			.el-input {
				width: 8vw;
			}
		}
	}
	.btn {
		display: flex;
		justify-content: space-around;
		.el-button {
			width: 5vw;
			font-size: 14px;
		}
	}
}
</style>
